<template>
  <Sidebar ref="sidebar" :title="t('formulaSidebar.title')">
    <div class="box" :class="{ isDark }">
      <div class="formulaInputBox">
        <!-- <div class="title">{{ t('formulaSidebar.input') }}</div> -->
        <el-input
          v-model="formulaText"
          type="textarea"
          :placeholder="t('formulaSidebar.placeholder')"
          @keydown.stop
        />
        <el-button
          size="small"
          style="width: 100%; margin-top: 20px;"
          @click="confirm"
          >{{ t('formulaSidebar.confirm') }}</el-button
        >
      </div>
      <div class="title">{{ t('formulaSidebar.common') }}</div>
      <div class="formulaList customScrollbar">
        <div class="formulaItem" v-for="(item, index) in list" :key="index">
          <div class="overview" v-html="item.overview"></div>
          <div class="text" @click="formulaText = item.text">
            {{ item.text }}
          </div>
        </div>
      </div>
    </div>
  </Sidebar>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, defineProps } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useMainStore } from '@/stores'
import { useEventBus } from '@/hooks'
import { ElMessage } from 'element-plus'
import Sidebar from './Sidebar.vue'
import { formulaList } from '@/config/constant'

// Props
const props = defineProps({
  mindMap: {
    type: Object
  }
})

// Composables
const { t } = useI18n()
const store = useMainStore()
const { activeSidebar, isDark, localConfig } = storeToRefs(store)
const { $on, $off, $emit, $once } = useEventBus()

// Refs
const sidebar = ref(null)

// Reactive data
const formulaText = ref('')
const list = ref([])
const activeNodes = ref([])

// Watchers
watch(activeSidebar, (val) => {
  if (val === 'formulaSidebar') {
    sidebar.value.show = true
  } else {
    sidebar.value.show = false
  }
})

// Methods
const init = () => {
  if (!window.katex) return
  list.value = formulaList.map(item => {
    return {
      overview: window.katex.renderToString(
        item,
        props.mindMap.formula.getKatexConfig()
      ),
      text: item
    }
  })
}

const handleNodeActive = (...args) => {
  activeNodes.value = [...args[1]]
  if (
    activeNodes.value.length <= 0 &&
    activeSidebar.value === 'formulaSidebar'
  ) {
    store.setActiveSidebar(null)
  }
}

const confirm = () => {
  if (!localConfig.value.openNodeRichText) {
    return ElMessage.warning(t('formulaSidebar.tip'))
  }
  let str = formulaText.value.trim()
  if (!str) return
  props.mindMap.execCommand('INSERT_FORMULA', str)
}

// Lifecycle hooks
onMounted(() => {
  $on('node_active', handleNodeActive)
  init()
})

onBeforeUnmount(() => {
  $off('node_active', handleNodeActive)
})
</script>

<style lang="less" scoped>
.box {
  padding: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &.isDark {
    .title {
      color: #fff;
    }

    .formulaList {
      .formulaItem {
        .overview,
        .text {
          color: #fff;
        }

        .text {
          background-color: #363b3f;
        }
      }
    }

    :deep(.el-textarea__inner) {
      background-color: transparent;
      color: #fff;
    }
  }

  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 10px 0;
    flex-shrink: 0;
  }

  .formulaInputBox {
    flex-shrink: 0;
  }

  .formulaList {
    height: 100%;
    overflow-y: auto;

    .formulaItem {
      position: relative;
      display: flex;
      overflow: hidden;
      align-items: center;
      border: 1px solid #dcdfe6;
      border-bottom: none;

      &:last-of-type {
        border-bottom: 1px solid #dcdfe6;
      }

      .overview,
      .text {
        width: 50%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
      }

      .overview {
        padding: 10px 0;
        border-right: none;
      }

      .text {
        cursor: pointer;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border-left: 1px solid #dcdfe6;
        background-color: #fafafa;
      }
    }
  }
}
</style>
